<!--
 * @Author: '浪川' '1214391613@qq.com'
 * @Date: 2025-07-23 11:37:41
 * @LastEditors: '浪川' '1214391613@qq.com'
 * @LastEditTime: 2025-08-19 15:28:39
 * @FilePath: \passiflora-edulis-sims\src\components\CreateBook\BookSettingComponent.vue
 * @Description:
 *
 * Copyright (c) 2025 by '1214391613@qq.com', All Rights Reserved.
-->
<script setup lang="ts">
import { useQuasar } from 'quasar'
import { usePuzzleReqStore } from 'src/stores/CreateBook/puzzle-req-store'
import AITableComponent from './AITableComponent.vue'
const puzzle_req_store = usePuzzleReqStore()
const $q = useQuasar()
const request_v1_ai_double_puzzle = async () => {
  $q.loadingBar.start()
  $q.loading.show({
    delay: 400, // ms
  })
  await puzzle_req_store.request_v1_ai_create()
  $q.loading.hide()
  $q.loadingBar.stop()
}
</script>
<template>
  <div>
    <div>
      <q-form>
        <!-- 书本名称 -->
        <div class="row">
          <div class="col-12 q-pb-sm q-pr-sm">
            <q-input
              outlined
              v-model="puzzle_req_store.title"
              label="书本名称"
            ></q-input>
          </div>

          <div class="col-12 q-pb-sm q-pr-sm">
            <q-input
              outlined
              v-model="puzzle_req_store.instruction"
              label="书本描述"
            >
            </q-input>
          </div>
          <div class="col-4 q-pb-sm q-pr-sm">
            <q-input
              outlined
              v-model.number="puzzle_req_store.puzzle_num"
              label="拼图数量"
              type="number"
            />
          </div>
          <div class="col-4 q-pb-sm q-pr-sm">
            <q-input
              outlined
              v-model.number="puzzle_req_store.puzzle_words_num"
              label="拼图最少单词数量"
              type="number"
            />
          </div>
          <div class="col-4 q-pb-sm q-pr-sm">
            <q-select
              outlined
              v-model="puzzle_req_store.model"
              :options="puzzle_req_store.ollama_models"
              label="Ai 模型选择"
            />
          </div>
          <div class="col-6 q-pb-sm q-pr-sm">
            <q-select
              outlined
              v-model="puzzle_req_store.puzzle_mould"
              :options="puzzle_req_store.puzzle_mould_options"
              label="Puzzle 模式选择"
            />
          </div>
          <div class="col-6 q-pb-sm q-pr-sm">
            <q-select
              outlined
              v-model="puzzle_req_store.lang"
              :options="puzzle_req_store.puzzle_lang_options"
              label="Puzzle 语言选择"
            />
          </div>
        </div>
      </q-form>
    </div>
    <div>
      <q-btn
        color="secondary"
        label="生成"
        @click="request_v1_ai_double_puzzle"
      />
    </div>
    <q-separator spaced />
    <AITableComponent />
  </div>
</template>
